<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect, withCtx } from 'vue'
import * as echarts from 'echarts';
import { getDayData, getShipData, getBargeShipData, getBargeShip, getFisherShip, getAreaDataByDate, getTotalData, getCompleteData, exportDataToExcel } from '../network/net.js'
import { formatDate } from '../utils/cTime.js'
import {
    Download
} from '@element-plus/icons-vue'
const params1 = reactive({
    startDate: '',
    endDate: ''
})
const url = import.meta.env.VITE_backurl;


let cardH = ref(0)

onMounted(() => {
    const now = new Date();

    // 时间为昨天两点到今天两点
    const date = new Date(now.getTime() - 1 * 24 * 60 * 60 * 1000);
    const formattedDate1 = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}T14:00`;
    params1.startDate = formattedDate1
    const formattedDate = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}T14:00`;
    params1.endDate = formattedDate

    getBargeShip().then(res => {
        if (res.data.code === 200) {
            bargeShips.value = res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name
                }

            })
        }
    }).catch(err => {
        console.log(err)
    })

    getFisherShip().then(res => {
        if (res.data.code === 200) {
            fisherShips.value = res.data.data.map(item => {
                return {
                    value: item.name,
                    label: item.name
                }

            })
        }
    }).catch(err => {
        console.log(err)
    })
    // 获取屏幕宽度
    let width = document.documentElement.clientWidth
    // console.log(width);
    cardH.value = (width - 30) * 0.67 + 'px'
    nextTick(() => {
        getTotalData().then(res => {
            let { total_weight, total_disposal, total_count, barge_ship_infos, fisher_ship_infos } = res.data.data
            Object.assign(total_data, {
                total_weight,
                total_disposal,
                total_count,
                barge_ship_infos,
                fisher_ship_infos
            })
        })

        getCompleteData(params1).then(res => {
            let { date, total_weight, total_disposal, total_count, barge_ship_infos, fisher_ship_infos } = res.data.data
            Object.assign(completeData, {
                date,
                total_weight,
                total_disposal,
                total_count,
                barge_ship_infos,
                fisher_ship_infos
            })
            bargeInfos.value = barge_ship_infos
            fisherInfos.value = fisher_ship_infos
        })
    })
})

const total_data = reactive({
    total_weight: 0,
    total_disposal: 0,
    total_count: 0,
    barge_ship_infos: [],
    fisher_ship_infos: [],
})


// const completeData = ref([])
const completeData = reactive({
    total_weight: 0,
    total_disposal: 0,
    total_count: 0,
    barge_ship_infos: [],
    fisher_ship_infos: [],
})

const bargeInfos = ref([])
const fisherInfos = ref([])

const bargeShips = ref([])

const fisherShips = ref([])

const initS1 = (data) => {
    if (!data) {
        echarts.dispose(document.getElementById('c1'));
    }
    let dates = data.map(item => item.date_only)
    let dataForFishing = data.map(item => item.total_weight)
    let dataForDisposal = data.map(item => item.total_disposal)
    var option = {
        xAxis: {
            type: 'category',
            data: dates,
            axisLine: {
                lineStyle: {
                    color: '#999999'
                }
            },
            axisLabel: {
                color: '#999999',
                formatter: function (value) {
                    return value.split('-').slice(1).join('-');
                }
            },
            // 对齐刻度
            // axisTick: {
            //     alignWithLabel: true
            // }
        },
        yAxis: {
            type: 'value',
            // 注意：show: true 实际上会显示纵坐标轴，如果您想隐藏它，应设置为 false  
            show: true,
            splitLine: {
                lineStyle: {
                    color: 'rgba(153, 153, 153, 0.3)',
                    type: 'dashed'
                }
            },
            name: '重量(吨)',
        },
        legend: {
            show: true,
            data: ['打捞量', '处置量'] // 添加图例名称  
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                },
            }
        },
        grid: {
            left: '0%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true
        },
        series: [
            {
                name: '打捞量', // 第一条折线的名称  
                data: dataForFishing, // 假设这是打捞量的数据数组  
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0BBDA7'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'rgba(11, 189, 167, 1)' },
                            { offset: 1, color: 'rgba(11, 189, 167, 0)' }
                        ]
                    ),
                    opacity: 0.8
                },
                itemStyle: {
                    color: '#0BBDA7' // 折线图中数据点的颜色  
                },
                showSymbol: false
            },
            {
                name: '处置量', // 第二条折线的名称  
                data: dataForDisposal, // 假设这是处置量的数据数组  
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#F7BD5C' // 第二条折线的颜色  
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'rgba(247, 189, 92, 1)' }, // 100% 时的颜色  
                            { offset: 1, color: 'rgba(247, 189, 92, 0)' }  // 0% 时的颜色  
                        ]
                    ),
                    opacity: 0.8
                },
                itemStyle: {
                    color: '#F7BD5C' // 折线图中数据点的颜色  
                },
                showSymbol: false
            }
        ]
    };


    // 基于准备好的dom，初始化echarts实例  
    var myChart = echarts.init(document.getElementById('c1'));
    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);

}

const initS3 = (allData) => {
    if (!allData) {
        echarts.dispose(document.getElementById('c3'));
    }
    let myChart = echarts.init(document.getElementById('c3'));
    // let dates = ['2021-09-01', '2021-09-02', '2021-09-03', '2021-09-04', '2021-09-05', '2021-09-06', '2021-09-07', '2021-09-08', '2021-09-09', '2021-09-10'];
    // let data = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
    // data = data.sort(() => Math.random() - 0.5);

    let dates = allData.map(item => item.date_only)
    let data = allData.map(item => item.total_count)

    let option = {
        // 全局配置项  
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: dates, // 假设 generateRandomDates 是一个生成随机日期的函数  
            axisLine: {
                lineStyle: {
                    color: '#999999' // 坐标轴颜色  
                }
            },
            axisLabel: {
                color: '#999999',
                formatter: function (value) {
                    return value.split('-').slice(1).join('-');
                }
            },
            // 刻度对其
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            show: true, // 不显示纵坐标轴  
            axisLine: {
                lineStyle: {
                    color: 'rgba(153, 153, 153, 0.5)', // 虚线颜色  
                    type: 'dashed' // 虚线类型  
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#999999', // 网格线颜色  
                    type: 'dashed' // 网格线为虚线  
                }
            },
            name: '船次'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        series: [
            {
                name: '卸载船次',
                type: 'bar',
                data: data, // 假设 generateRandomValues 是一个生成随机船次数值的函数  
                itemStyle: {
                    color: '#3398DB' // 柱状图颜色（可以自定义）  
                },
            }
        ]
    };
    myChart.setOption(option);
}

const initS4 = (allData) => {
    if (!allData) {
        echarts.dispose(document.getElementById('c4'));
    }

    let myChart = echarts.init(document.getElementById('c4'));
    let option = {
        legend: {
            top: 'bottom',
            show: false
        },

        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [20, 60],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                label: {
                    show: true,
                    // name+value name换行后显示value
                    formatter: `{b}\n{c}吨`,
                    fontSize: 14,
                    // #999999
                    color: '#999999'
                },
                data: allData
            }
        ]
    };
    myChart.setOption(option);
}

const initS2 = (allData) => {
    if (!allData) {
        echarts.dispose(document.getElementById('c2'));
    }
    let myChart = echarts.init(document.getElementById('c2'));
    // let dates = ['2021-09-01', '2021-09-02', '2021-09-03', '2021-09-04', '2021-09-05', '2021-09-06', '2021-09-07', '2021-09-08', '2021-09-09', '2021-09-10'];
    // let data = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
    // data = data.sort(() => Math.random() - 0.5);

    let dates = allData.map(item => item.date_only)
    let data = allData.map(item => item.total_weight.toFixed(3))

    let option = {
        // 全局配置项  
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: dates, // 假设 generateRandomDates 是一个生成随机日期的函数  
            axisLine: {
                lineStyle: {
                    color: '#999999' // 坐标轴颜色  
                }
            },
            axisLabel: {
                color: '#999999',
                formatter: function (value) {
                    return value.split('-').slice(1).join('-');
                }
            },
            // 刻度对其
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            show: true, // 不显示纵坐标轴  
            axisLine: {
                lineStyle: {
                    color: 'rgba(153, 153, 153, 0.5)', // 虚线颜色  
                    type: 'dashed' // 虚线类型  
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#999999', // 网格线颜色  
                    type: 'dashed' // 网格线为虚线  
                }
            },
            name: '打捞量'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        series: [
            {
                name: '打捞量',
                type: 'bar',
                data: data, // 假设 generateRandomValues 是一个生成随机船次数值的函数  
                itemStyle: {
                    color: '#3398DB' // 柱状图颜色（可以自定义）  
                },
            }
        ]
    };
    myChart.setOption(option);
}
const shipInfo = reactive({
    shipType: '',
    shipName: ''
})

let fOptions = ref([])
const remoteMethod = (query) => {
    if (query) {
        if (shipInfo.shipType === '驳船') {
            fOptions.value = bargeShips.value.filter(item => item.label.includes(query))
        } else if (shipInfo.shipType === '渔船') {
            fOptions.value = fisherShips.value.filter(item => item.label.includes(query))
        }
    } else {
        fOptions.value = []
    }
}

// 监听params1和shipInfo的变化
// watch([() => params1.startDate, () => params1.endDate], (newVal, oldVal) => {
//     console.log(newVal);
// })

const bargeShip = ref('')
const bOptions = ref([])
const remoteMethodBarge = (query) => {
    if (query) {
        fOptions.value = bargeShips.value.filter(item => item.label.includes(query))
    } else {
        fOptions.value = []
    }
}

const dll = ref(0)
const czl = ref(0)

const handleExport = (type) => {
    if (type === '0') {
        if (!bargeInfos.value || bargeInfos.value.length == 0) {
            alert('暂无数据')
            return
        }
        let data = bargeInfos.value?.map(item => {
            return [item.name, item.total_weight.toFixed(3), item.total_count + '']
        })

        // data开头加上表头
        data?.unshift(['名称', '卸载量(吨)', '船次'])

        exportDataToExcel({
            row: data
        }).then(res => {
            // window.open(url+res.data.data)
            wx.miniProgram.navigateTo({ url: "/pages/input/input?link=https://www.oceanread.net:1102" + res.data.data })

        })
    } else if (type === '1') {
        if (fisherInfos.value.length == 0) {
            alert('暂无数据')
            return
        }
        let data = fisherInfos.value?.map(item => {
            return [item.name, item.total_weight.toFixed(3)]
        })

        data.unshift(['名称', '卸载量(吨)'])

        exportDataToExcel({
            row: data
        }).then(res => {
            // window.open(url + res.data.data)
            wx.miniProgram.navigateTo({ url: "/pages/input/input?link=https://www.oceanread.net:1102" + res.data.data })
        })
    }

}

const minDate = new Date(2023, 0, 1);
const maxDate = new Date(2025, 0, 1);
const currentDate = ref(['2024', '01', '01']);
const currentTime = ref(['00', '00']);
const showBottomDate = ref(false);

const timeConfirm = () => {
    // let arr = params1.endDate.split('T')
    // arr[0] = currentDate.value.join('-')
    // params1.endDate = arr.join('T')

    let arr = params1[dateTimeType.value].split('T')
    arr[0] = currentDate.value.join('-')
    params1[dateTimeType.value] = arr.join('T')
    showBottomDate.value = false
}

const timeCancel = () => {
    showBottomDate.value = false
}

const showBottomTime = ref(false)
const timeConfirm1 = () => {

    // let arr = params1.endDate.split('T')
    // arr[1] = currentTime.value.join(':')
    // params1.endDate = arr.join('T')

    let arr = params1[dateTimeType.value].split('T')
    arr[1] = currentTime.value.join(':')
    params1[dateTimeType.value] = arr.join('T')
    showBottomTime.value = false
}

const timeCancel1 = () => {
    showBottomTime.value = false
}

const dateTimeType = ref('endDate')

const handleShowTime = (t,type) => {
    dateTimeType.value = type
    showBottomTime.value = true
    currentTime.value = t.split(':')
}

const handleShowDate = (date,type) => {
    dateTimeType.value = type
    showBottomDate.value = true
    currentDate.value = date.split('-')
}

watch([params1, shipInfo, bargeShip], (newVal, oldVal) => {
    if (params1.startDate && params1.endDate) {

        getTotalData().then(res => {
            let { total_weight, total_disposal, total_count, barge_ship_infos, fisher_ship_infos } = res.data.data
            Object.assign(total_data, {
                total_weight,
                total_disposal,
                total_count,
                barge_ship_infos,
                fisher_ship_infos
            })
        })

        getCompleteData(params1).then(res => {
            let { date, total_weight, total_disposal, total_count, barge_ship_infos, fisher_ship_infos } = res.data.data
            Object.assign(completeData, {
                date,
                total_weight,
                total_disposal,
                total_count,
                barge_ship_infos,
                fisher_ship_infos
            })
            bargeInfos.value = barge_ship_infos
            fisherInfos.value = fisher_ship_infos
        })
        // 第三个统计次数
        // if (bargeShip.value) {
        //     let bargeData = {
        //         startDate: params1.startDate,
        //         endDate: params1.endDate,
        //         bargeShip: bargeShip.value
        //     }
        //     getBargeShipData(bargeData).then(res => {
        //         console.log(res.data.data);
        //         // initS3(res.data.data)
        //     })
        // }
        // 第四个海域统计
        let areaData = {
            startDate: params1.startDate,
            endDate: params1.endDate
        }
        getAreaDataByDate(areaData).then(res => {
            let allData = res.data.data?.map(item => {
                return {
                    value: item.total_weight,
                    name: item.area_name
                }
            })
            initS4(allData)
        })
        // 第一个按天统计
        // let data = {
        //     startDate: params1.startDate,
        //     endDate: params1.endDate
        // }
        // getDayData(data).then(res => {
        //     dll.value = res.data.data[0].total_weight
        //     czl.value = res.data.data[0].total_disposal

        //     // initS1(res.data.data)
        // })
        // // 第二个按船号统计
        // if (shipInfo.shipName && shipInfo.shipType) {
        //     let shipData = {
        //         startDate: params1.startDate,
        //         endDate: params1.endDate,
        //         ship_name: shipInfo.shipName
        //     }
        //     getShipData(shipData).then(res => {
        //         console.log(res.data.data);
        //         initS2(res.data.data)
        //     })
        // }

    }
}, {
    deep: true
})

</script>

<template>
    <div id="chart">
        <section class="home_title">
            <span>统计查询</span>
        </section>
        <div id="c_m" style="height: 100%;width: 100%;overflow: auto;">
            <div
                style="display: flex;justify-content: space-between;width: 100%;margin-top: 10px;align-items: center;flex-direction: column;">
                <!-- <span style="font-size: 16px;">时间段：</span> -->

                <!-- <input id="h_t" type="datetime-local" v-model="params1.startDate" style="width: 47%;border: none;">
                -
                <input id="h_t" type="datetime-local" v-model="params1.endDate" style="width: 47%;border: none;"> -->
                <div id="t_p">
                    <div>
                        开始时间：
                    </div>
                    <div class="p_i" @click="handleShowDate(params1.startDate.split('T')[0],'startDate')">
                        {{ params1.startDate.split('T')[0] }}
                    </div>
                    <div class="p_i" style="margin-left: 10px;"
                        @click="handleShowTime(params1.startDate.split('T')[1],'startDate')">
                        {{ params1.startDate.split('T')[1] }}
                    </div>
                </div>
                <div id="t_p" style="margin-top: 5px;">
                    <div>
                        终止时间：
                    </div>
                    <div class="p_i" @click="handleShowDate(params1.endDate.split('T')[0],'endDate')">
                        {{ params1.endDate.split('T')[0] }}
                    </div>
                    <div class="p_i" style="margin-left: 10px;" @click="handleShowTime(params1.endDate.split('T')[1],'endDate')">
                        {{ params1.endDate.split('T')[1] }}
                    </div>
                </div>
            </div>
            <section id="chart_s0">

                <div id="a_n" class="chart_card">
                    <div style="display: flex;justify-content: space-around;height: 80px;">
                        <div class="n_i">
                            <div class="i_h">卸载量</div>

                            <div class="i_v">{{ completeData.total_weight.toFixed(3) }}吨</div>

                        </div>
                        <div class="n_i">
                            <div class="i_h">历史卸载量</div>

                            <div class="i_v">{{ total_data.total_weight.toFixed(3) }}吨</div>

                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-around;height: 80px;">
                        <div class="n_i">
                            <div class="i_h">处置量</div>

                            <div class="i_v">{{ completeData.total_disposal.toFixed(3) }}吨</div>

                        </div>
                        <div class="n_i">
                            <div class="i_h">历史处置量</div>

                            <div class="i_v">{{ total_data.total_disposal.toFixed(3) }}吨</div>

                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-around;height: 80px;">
                        <div class="n_i">
                            <div class="i_h">船次</div>

                            <div class="i_v">{{ completeData.total_count }}</div>

                        </div>
                        <div class="n_i">
                            <div class="i_h">历史船次</div>

                            <div class="i_v">{{ total_data.total_count }}</div>

                        </div>
                    </div>

                </div>
            </section>
            <section id="chart_s1">
                <div class="s_header">
                    <span>驳船卸载量统计</span>
                    <el-button type="default" :icon="Download" size="small" style="position: absolute;right: 0;"
                        @click="handleExport('0')">导出</el-button>
                </div>
                <div id="a_n" class="chart_card">
                    <div id="n_h">
                        <template v-for="item in ['名称', '卸载量', '船次']">
                            <div :style="{ width: (item == '名称') ? '35%' : '32.5%' }">
                                {{ item }}
                            </div>
                        </template>

                    </div>
                    <div id="n_v">
                        <div v-for="item in bargeInfos"
                            style="display: flex;justify-content: space-around;width: 100%;flex-direction: column;">
                            <div style="display: flex;padding: 3px 0px;">
                                <div style="width: 35%;" class="v_i">{{ item.name }}</div>
                                <div style="width: 32.5%;">{{ item.total_weight.toFixed(3) }}吨</div>
                                <!-- <div style="width: 21.6%;">{{ item.total_disposal }}吨</div> -->
                                <div style="width: 32.5%;">{{ item.total_count }}</div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            <!-- <section id="chart_s1">
                <div class="s_header">
                    <span>驳船处置量统计</span>
                </div>
                <div id="a_n" class="chart_card">
                    <div id="n_h">
                        <template v-for="item in ['名称', '抛投量', '回收量','总量']">
                            <div :style="{ width: (item == '名称') ? '35%' : '21.6%' }">
                                {{ item }}
                            </div>
                        </template>

                    </div>
                    <div id="n_v">
                        <div v-for="item in bargeInfos"
                            style="display: flex;justify-content: space-around;width: 100%;flex-direction: column;">
                            <div style="display: flex;padding: 3px 0px;">
                                <div style="width: 35%;" class="v_i">{{ item.name }}</div>
                                <div style="width: 21.6%;">{{ item.total_weight }}吨</div>
                                <div style="width: 21.6%;">{{ item.total_disposal }}吨</div>
                                <div style="width: 21.6%;">{{ item.total_count }}次</div>
                            </div>

                        </div>
                    </div>
                </div>
            </section> -->

            <section id="chart_s2">
                <div class="s_header">
                    <span>渔船卸载量统计</span>
                    <el-button type="default" :icon="Download" size="small" style="position: absolute;right: 0;"
                        @click="handleExport('1')">导出</el-button>
                </div>
                <div id="a_n" class="chart_card">
                    <div id="n_h">
                        <template v-for="item in ['名称', '卸载量']">
                            <div :style="{ width: (item == '名称') ? '35%' : '21.6%' }">
                                {{ item }}
                            </div>
                        </template>

                    </div>
                    <div id="n_v">
                        <div v-for="item in fisherInfos"
                            style="display: flex;justify-content: space-around;width: 100%;flex-direction: column;">

                            <div style="display: flex;width: 100%;padding: 3px 0px;">
                                <div style="width: 50%;" class="v_i">{{ item.name }}</div>
                                <div style="width: 50%;">{{ item.total_weight.toFixed(3) }}吨</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- <section id="chart_s1">
                <div class="s_header">
                    <span>按天查询打捞量、处置量</span>
                </div>
                <div class="chart_card" :style="{ 'height': cardH }" id="c1">
                    {{ dll }} {{ czl }}
                </div>
            </section> -->

            <!-- <section id="chart_s2">
                <div class="s_header">
                    <span>按驳船或者渔船号查询</span>
                    <div style="display: flex;width: 100%;margin-top: 5px;">
                        <el-select v-model="shipInfo.shipType" placeholder="船类型" style="width: 120px;height: 38px;">
                            <el-option label="驳船" value="驳船" />
                            <el-option label="渔船" value="渔船" />
                        </el-select>
                        <el-select v-model="shipInfo.shipName" filterable remote reserve-keyword placeholder="请输入船号"
                            :remote-method="remoteMethod" style="flex: 1;">
                            <el-option v-for="item in fOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>

                </div>
                <div class="chart_card" :style="{ 'height': cardH }" id="c2">

                </div>
            </section> -->

            <!-- <section id="chart_s3">
                <div class="s_header">
                    <span>驳船按日统计卸载船次</span>
                    <el-select style="height: 38px;margin-top: 5px;" v-model="bargeShip" filterable remote
                        reserve-keyword placeholder="请输入船号" :remote-method="remoteMethodBarge">
                        <el-option v-for="item in fOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                </div>
                <div class="chart_card" :style="{ 'height': cardH }" id="c3">

                </div>
            </section> -->

            <section id="chart_s4">
                <div class="s_header">
                    <span>海域打捞量统计</span>
                    <!-- <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 10px;">
                        <input id="h_t" type="date" v-model="params1.startDate" style="width: 45%;border: none;">
                        -
                        <input id="h_t" type="date" v-model="params1.endDate" style="width: 45%;border: none;">
                    </div> -->
                </div>
                <div class="chart_card" :style="{ 'height': cardH }" id="c4">

                </div>
            </section>
        </div>

        <van-popup v-model:show="showBottomDate" round position="bottom" :style="{ height: '30%' }"
            @click-overlay="timeConfirm">
            <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
                @confirm="timeConfirm" @cancel="timeCancel" />
        </van-popup>

        <!-- 时间选择弹窗 -->
        <van-popup v-model:show="showBottomTime" round position="bottom" :style="{ height: '30%' }"
            @click-overlay="timeConfirm1">
            <van-time-picker v-model="currentTime" type="time" title="选择时间" @confirm="timeConfirm1"
                @cancel="timeCancel1" />
        </van-popup>
    </div>
</template>

<style lang="less" scoped>
#chart {
    background: #E2F4F4;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 50px 15px 0 15px;
    align-items: center;


    #t_p {
        display: flex;
        align-items: center;
        width: 100%;

        .p_i {
            height: 38px;
            padding: 1px 11px;
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            border-radius: 4px;
            background-color: #ffffff;
            color: #606266;
            display: flex;
            align-items: center;
            flex: 1;
        }
    }

    #c_m {

        // 隐藏滚动条
        &::-webkit-scrollbar {
            display: none;
        }
    }

    #h_t {
        border: none;
        padding: 4px 8px;
        border-radius: 19px;
        box-shadow: 0 0 0 1px #dcdfe6;
        background-color: #ffffff;
        height: 38px;
    }

    section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;

        // :deep(.el-input__wrapper) {
        //     border: none;
        //     border-radius: 19px;
        //     height: 40px;
        // }

        // :deep(.el-input__inner) {
        //     color: #FFFFFF !important;
        // }

        :deep(.el-select__wrapper) {
            border: none;
            height: 100%;
        }

        :deep(.el-select__selected-item) {
            width: 100%;
        }



        .s_header {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;



            span {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
                text-align: left;
                font-style: normal;
                letter-spacing: 1px;
            }

        }
    }

    .chart_card {
        background-color: #FFFFFF;
        border-radius: 11px;
        box-shadow: 0px 1px 10px 0px rgba(0, 139, 121, 0.2);
        padding: 7px 13px 6px 13px;
        width: 100%;
    }


    #chart_s1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        // margin-top: 20px;

        #a_n {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            #n_h {
                display: flex;
                justify-content: space-around;
                font-size: 18px;
                color: #333333;
                font-weight: 500;
                text-align: center;
                font-style: normal;
                letter-spacing: 1px;
                padding: 10px 0;
                border-bottom: 1px solid #E5E5E5;
            }

            #n_v {
                display: flex;
                flex-direction: column;
                // justify-content: space-around;
                font-size: 18px;
                color: #333333;
                font-weight: 500;
                text-align: center;
                font-style: normal;
                letter-spacing: 1px;
                padding: 10px 0;
                text-align: center;
                overflow: auto;
                max-height: 200px;
            }
        }
    }

    #chart_s2 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        // margin-top: 20px;

        #a_n {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            #n_h {
                display: flex;
                justify-content: space-around;
                font-size: 18px;
                color: #333333;
                font-weight: 500;
                text-align: center;
                font-style: normal;
                letter-spacing: 1px;
                padding: 10px 0;
                border-bottom: 1px solid #E5E5E5;
            }

            #n_v {
                display: flex;
                // justify-content: space-around;
                flex-direction: column;

                font-size: 18px;
                color: #333333;
                font-weight: 500;
                text-align: center;
                font-style: normal;
                letter-spacing: 1px;
                padding: 10px 0;
                text-align: center;
                overflow: auto;
                max-height: 200px;
            }
        }
    }

    #a_n {
        width: 100%;
        margin-top: 10px;

        .n_i {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .i_v {
                font-size: 24px;
                color: #333333;
                font-weight: 500;
                text-align: center;
            }

            .i_h {
                font-size: 18px;
                color: #999999;
                font-weight: 500;
                text-align: center;
            }
        }
    }
}
</style>